<template>
  <div class="create-meeting-main-component">
    <!-- 标题头 -->
    <span class="flow-title">创建会议</span>
    <!-- 表格渲染 -->
    <div>
      <div v-for="config in createMeetingStartTableConfig" :key="config.key">
        <el-row :key="config.key + 'el-row'" type="flex" class="el-row-border">
          <template v-for="cols in config.cols">
            <el-col
              :span="cols.titleSpan"
              :key="cols.filed + 'title'"
              class="cols-title div-flex-container"
            >
              <template v-if="cols.slot">
                <template v-if="cols.filed === 'attendTheMember'">
                  {{ cols.text }}({{ cols.number }})
                </template>
                <template v-else>
                  <el-tooltip
                    class="cols-tooltip"
                    effect="dark"
                    :content="`还有 ${cols.number} 个委员可以请假`"
                    placement="right"
                  >
                    <el-button type="text" style="color: #000" class="cols-title">
                      {{ cols.text }}
                      (<span style="color: red">{{ cols.number }}</span>)
                    </el-button>
                  </el-tooltip>
                </template>
              </template>
              <template v-else>
                {{ cols.text }}
              </template>
            </el-col>
            <el-col
              :span="cols.contentSpan"
              :key="cols.filed + 'content'"
              class="cols-content"
            >
              <!-- 下拉框组 -->
              <template v-if="cols.type === 'select'">
                <el-select v-model="meetingStartFrom[cols.filed]">
                  <el-option
                    v-for="dict in dictDataList[cols.dictDataSource]"
                    :key="dict.id"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </template>
              <!-- 多选框组 -->
              <template v-else-if="cols.type === 'check'">
                <el-checkbox-group v-model="meetingStartFrom[cols.filed]" :max="cols.number">
                  <el-checkbox
                    v-for="dict in dictDataList[cols.dictDataSource]"
                    :key="dict.id"
                    :label="dict.value"
                  >
                    {{ dict.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <!-- 时间组 -->
              <template v-else-if="cols.type === 'date'">
                <el-date-picker
                  v-model="meetingStartFrom[cols.filed]"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                />
              </template>
              <!-- 输入框组 -->
              <template v-else-if="cols.type === 'input'">
                <el-input v-model="meetingStartFrom[cols.filed]" />
              </template>
              <!-- 静态组 -->
              <template v-else-if="cols.type === 'showData'">
                <show-name :name-list="dictDataList[cols.dictDataSource]" />
              </template>
              <!-- number 输入组 -->
              <template v-else-if="cols.type === 'inputNumber'">
                <el-input
                  v-model="meetingStartFrom[cols.filed]"
                  type="number"
                  style="width: 80px"
                />
                分钟
              </template>
            </el-col>
          </template>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import ShowName from '../static-component/show-name'

export default {
  name: 'CreateMeetingStart',
  components: {
    ShowName
  },
  data() {
    return {
      nameList: [],
      // 表单
      meetingStartFrom: {
        leaveMembers: []
      },
      // 字典、下拉框的list集合
      dictDataList: {
        // 独立顾问
        adviserList: [
          { id: '132', name: '刘杰' },
          { id: '142', name: '朱伟龙' },
          { id: '456', name: '彭文定' },
          { id: '786', name: '马阳' }
        ],
        // 出席委员
        attendTheMemberList: [
          { id: '342', name: '杨过' },
          { id: 'dsfg', name: '李银河' },
          { id: 'asdf', name: '小龙女' },
          { id: 'cvb', name: 'GieGie' }
        ],
        // 请假委员
        leaveMembersList: [
          { id: 1, value: 1, label: '邓贤1' },
          { id: 2, value: 2, label: '邓贤2' },
          { id: 3, value: 3, label: '邓贤3' },
          { id: 4, value: 4, label: '邓贤4' }
        ],
        // 主持人
        compereList: [
          { id: 1, label: '李四', value: '1' },
          { id: 2, label: '张三', value: '2' },
          { id: 3, label: '赵六', value: '3' }
        ],
        // 记录人
        noteTakerList: [
          { id: 4, label: '王五', value: '1' },
          { id: 5, label: '邓七', value: '2' },
          { id: 6, label: '唐八', value: '3' }
        ]
      },
      // 表格配置
      createMeetingStartTableConfig: Object.freeze([
        {
          key: 'config-one',
          cols: [
            {
              text: '时间',
              filed: 'createTime',
              titleSpan: 4,
              contentSpan: 8,
              type: 'date',
              slot: false
            },
            {
              text: '地点',
              filed: 'place',
              titleSpan: 4,
              contentSpan: 8,
              type: 'input',
              slot: false
            }
          ]
        },
        {
          key: 'config-two',
          cols: [
            {
              text: '主持人',
              filed: 'compere',
              titleSpan: 4,
              contentSpan: 8,
              type: 'select',
              dictDataSource: 'compereList',
              slot: false
            },
            {
              text: '记录人',
              filed: 'noteTaker',
              titleSpan: 4,
              contentSpan: 8,
              type: 'select',
              slot: false,
              dictDataSource: 'noteTakerList'
            },
          ]
        },
        {
          key: 'config-three',
          cols: [
            {
              text: '出席委员',
              filed: 'attendTheMember',
              titleSpan: 4,
              contentSpan: 20,
              type: 'showData',
              dictDataSource: 'attendTheMemberList',
              slot: true,
              number: 18
            }
          ]
        },
        {
          key: 'config-four',
          cols: [
            {
              text: '请假委员',
              filed: 'leaveMembers',
              titleSpan: 4,
              contentSpan: 20,
              type: 'check',
              dictDataSource: 'leaveMembersList',
              slot: true,
              number: 3
            }
          ]
        },
        {
          key: 'config-five',
          cols: [
            {
              text: '独立顾问',
              filed: 'adviser',
              titleSpan: 4,
              contentSpan: 20,
              type: 'showData',
              dictDataSource: 'adviserList',
              slot: false
            }
          ]
        },
        {
          key: 'config-six',
          cols: [
            {
              text: '汇报间隔',
              filed: 'reportingInterval',
              titleSpan: 4,
              contentSpan: 20,
              type: 'inputNumber',
              slot: false
            }
          ]
        },
      ])
    }
  }
}
</script>

<style>

</style>
